<template>
	<div class="app-container">
		<el-form :model="data.info" :rules="data.rules" :label-width="language == 'en' ? '150px' : '120px'"
			class="w-1/2" ref="ruleFormRef">

			<el-form-item :label="$t('system.wechat.id') + ':'" prop="gh_id">
				<el-input v-model="data.info.gh_id" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('system.wechat.name') + ':'" prop="wx_name">
				<el-input v-model="data.info.wx_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item label="APP_ID:" prop="app_id">
				<el-input v-model="data.info.app_id" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('strategy.payee.secretKey') + 'SECRET:'" prop="secret">
				<el-input v-model="data.info.secret" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('system.wechat.token') + ':'" prop="token">
				<el-input v-model="data.info.token" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('system.wechat.key') + ':'" prop="aes_key">
				<el-input v-model="data.info.aes_key" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('system.wechat.domainFile') + ':'" prop="wx_txt">
				<el-input v-model="data.info.wx_txt" :placeholder="$t('message.pleaseEnter')" readonly>
					<template #append>
						<Upload :list="{ 'data': 'wxtext', 'list': false }" :type="99" :uptype="2"
							@exposeData="expose" />
					</template>
				</el-input>
			</el-form-item>

			<el-form-item :label="$t('strategy.payee.state') + ':'" prop="status">
				<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.enable')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.infos.organiz') + ':'" prop="ao_id">
				<el-cascader v-model="data.info.ao_id" :props="organinfo" class="w-full" clearable
					:placeholder="$t('message.pleaseSelect')" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import arrange from '@/utils/hierarchy';
import { addwx } from '@/api/system';
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let router = useRouter()

let data = reactive({
	info: { // 主体信息
		gh_id: '',
		wx_name: '',
		app_id: '',
		secret: '',
		token: '',
		aes_key: '',
		wx_txt: '',
		status: 1,
		ao_id: [],
	},
	rules: { // 表单验证
		gh_id: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		app_id: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		secret: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		token: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		aes_key: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		wx_txt: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		ao_id: { required: true, message:  $t('message.pleaseSelect'), trigger: 'change' }
	}
})

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		data.info.wx_txt = e.file.response.data
	} else {
		data.info.wx_txt = ''
	}
}

// 管理组织
let organinfo = reactive({
	lazy: true,
	multiple: false,
	emitPath: true,
	async lazyLoad(node, resolve) {
		let nodes = await arrange.arrange(2, node.data.value);
		resolve(nodes);
	}
});

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			let obj = {
				ao_id: ''
			}

			for (let key in data.info) {
				if (key != 'ao_id') {
					obj[key] = data.info[key]
				}
			}

			if (data.info.ao_id.length != '0') {
				obj.ao_id = data.info.ao_id[data.info.ao_id.length - 1]
			}

			addwx(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				});
			})
		}
	})
}

// 取消
let cancell = () => {
	for (let key in data.info) {
		if (key != 'status') {
			data.info[key] = ''
		}
	}
	data.info.status = 1
	router.back()
}

</script>